<%-- 
    Document   : test
    Created on : Dec 30, 2011, 4:04:13 PM
    Author     : Venus
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="../css/style.css" type="text/css" rel="stylesheet" />
        <link href="../css/ui-darkness/jquery-ui-1.8.16.custom.css" type="text/css" rel="stylesheet" />
        <link href="../css/jquery.alerts.css" type="text/css" rel="stylesheet" />
        <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="../js/highcharts.js" type="text/javascript"></script>
        <script src="../js/modules/exporting.js" type="text/javascript"></script>
        <script type="text/javascript">
            
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                        
                    },
                    title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                }
                            }
                        }
                    },
                    series: [{
                            type: 'pie',
                            name: 'Browser share',
                            data: [

                                ['Firefox',   45.0],
                                ['IE',       26.8],
                                {
                                    name: 'Chrome',
                                    y: 12.8,
                                    sliced: true,
                                    selected: true
                                },
                                ['Safari',    8.5],
                                ['Opera',     6.2],
                                ['Others',   0.7]
                                
                            ]
                        }]
                });
            });

        </script>

        <title>JSP Page</title>
    </head>
    <body>
        
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
    </body>
</html>
